import React from 'react'
import logo from '../../assets/logo.png'
import styles from './index.module.less'
import { Button, Input, Form,Toast } from 'react-vant'
import axios from '../../api'
import toast, { Toaster } from 'react-hot-toast';
import { useNavigate } from 'react-router-dom';

export default function Register() {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const onFinish = async values => {
  const res= await axios.post('/user/register',values)
toast.success(res.msg)
   setTimeout(() => {
    navigate(`/login`,{state:{
      username:values.username,
      password:values.password
    }})

  }, 1000);
  
  }
  return (
    <div className={styles.login}>
      <h1 className={styles.title}>注册</h1>
      <div className={styles['login-wrapper']}>
        <div className={styles.avater}>
          <img className={styles['avater-img']} src={logo} alt="" />
        </div>
        <Form
          form={form}
          onFinish={onFinish}
          footer={
            <div style={{ margin: '16px 16px 0' }}>
              <Button round nativeType='submit' type='info' block>
                注册
              </Button>
            </div>
          }
        >
          <Form.Item
            rules={[{ required: true, message: '请填写用户名' }]}
            name='username'
            label='用户名'
            labelWidth={50}
          >
            <Input placeholder='请输入用户名' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '请填写密码' }]}
            name='password'
            label='密码'
            labelWidth={50}
          >
            <Input placeholder='请输入密码' />
          </Form.Item>
            <Form.Item
            rules={[{ required: true, message: '请填写昵称' }]}
            name='nickname'
            label='昵称'
            labelWidth={50}
          >
            <Input placeholder='请输入昵称' />
          </Form.Item>
        </Form>
 

      </div>

      <p className={styles['login-tip']} onClick={()=>{
        navigate('/login')
      }}>
        已经有账号？点这里登录
      </p>
    </div>
  )
}
